import { Component, HostListener } from '@angular/core';
import { ElectronService } from './core/services';
import { TranslateService } from '@ngx-translate/core';
import { APP_CONFIG } from '../environments/environment';
import { ActiveModuleState } from './state/focus/modules/active-module';
import { Store } from '@ngrx/store';
import { selectFocus } from './state/focus/selectors/focus-selector';
import { ZoomOperationState } from './state/editor/models/editor-model';
import { EditorActions } from './state/editor/actions/editor-action';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private activeModule = '';
  constructor(
    private electronService: ElectronService,
    private translate: TranslateService,
    // eslint-disable-next-line @ngrx/no-typed-global-store
    private _store: Store<ActiveModuleState>,
    // eslint-disable-next-line @ngrx/no-typed-global-store
    private _zoomStore: Store<ZoomOperationState>,
  ) {
    // eslint-disable-next-line no-underscore-dangle
    this._store.select(selectFocus).subscribe(data => {
      this.activeModule = data.module;
    })
    this.translate.setDefaultLang('en');
    console.log('APP_CONFIG', APP_CONFIG);

    if (electronService.isElectron) {
      console.log(process.env);
      console.log('Run in electron');
      console.log('Electron ipcRenderer', this.electronService.ipcRenderer);
      console.log('NodeJS childProcess', this.electronService.childProcess);
    } else {
      console.log('Run in browser');
    }
  }

  @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    console.log(event);
    console.log(this.activeModule);
    if(this.activeModule === 'GRAPH_EDITOR'){
      if(event.key === 'ArrowDown' && event.ctrlKey){
        this._zoomStore.dispatch(EditorActions.zoomOperation({ payload: { type: 'OUT' } }));
      }else if(event.key === 'ArrowUp' && event.ctrlKey){
        this._zoomStore.dispatch(EditorActions.zoomOperation({ payload: { type: 'IN' } }));

      }

    }
  }
}
